<template>
  <page-search
    :search-config="searchConfig"
    @queryClick="handleQueryClick"
    @resetClick="handleResetClick"
  />
  <page-content
    ref="contentRef"
    :content-config="contentConfig"
    @edit-click="handleEditClick"
    @new-click="handleNewClick"
  >
    <template #parentId="scope">
      <el-tag
        :type="tagCategory(getNameById(scope.row[scope.prop!]))"
        v-if="!!getNameById(scope.row[scope.prop!])"
        >{{ getNameById(scope.row[scope.prop!]) }}</el-tag
      >
    </template>
  </page-content>
  <page-modal :modal-config="modalConfigRef" ref="modalRef" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import PageSearch from '@/components/page/search/index.vue'
import PageContent from '@/components/page/content/index.vue'
import PageModal from '@/components/page/modal/index.vue'
import { searchConfig, modalConfig, contentConfig } from './config/index'
import { usePageModal, usePageContent } from '@/components/hooks/index'
import useMainStore from '@/store/main/main'

defineOptions({
  // 组件名称
  name: 'Department',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleEditClick, handleNewClick } = usePageModal()

const { entrieDepartmentsMap } = useMainStore()

const getNameById = (id: string | undefined) => {
  if (!id) return ''
  return entrieDepartmentsMap.find((item) => item.value === id)?.label || ''
}

/** 根据标签内容创建不同的el-tag样式 */
const tagCategory = (str: string) => {
  let result = 'primary'
  if (['总裁办', '财务部', '人事部'].includes(str)) {
    result = 'danger'
  } else if (['技术部', '市场部'].includes(str)) {
    result = 'success'
  } else if (['运营部', '销售部'].includes(str)) {
    result = 'warning'
  }
  return result
}
const modalConfigRef = computed(() => {
  modalConfig.propItems.forEach((item) => {
    if (item.type == 'select' && item.prop == 'parentId') {
      item.options.push(...entrieDepartmentsMap)
    }
  })
  return modalConfig
})
</script>

<style scoped lang="scss">
.parentSpan {
  color: #67c23a;
}
</style>
